<template>
<div class="page-container"  @click="goGoodsDetail">
  <div class="img_fall">
    <div class="title">{{data.goods_name}} </div>
    <div class="price" style="color: red;padding-left: 8px">￥{{data.goods_price|formatPrice}}</div>
  </div>
  <div class="content">
    <img style="width:100%;height:auto"  :src="imgUrl">
  </div>
</div>
</template>

<script>
export default {
  name: "WaterFallItem",
  props:['data'],
  data(){
    return{
      goods_img:''

    }
  },
  computed:{
    imgUrl(){
      return this.$baseUrl+this.data.goods_img
    }
  },
  filters:{
    formatPrice(val){
      return val.toFixed(2)
    }

  },
  created() {
  },
  methods:{
    goGoodsDetail(){

      this.$router.push({
        path: `/GoodsDetail/${this.data.id}`,
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-container{
  background-color: rgba(1,1,1,0.1);
  width: 100%;
  display: flex;
  flex-direction: column;
  .img_fall{
    height: 50px;
    .title{
      text-align: left;padding: 2px 10px;height: 27px;line-height:27px;font-size: 16px;
      overflow:hidden;
      text-overflow:ellipsis; //设置超出后三个点
      white-space:nowrap;
    }
  }
  .content{
    order: -1;
    //height: 200px;
  }

}
</style>
